// 属性过渡混入
.attrTransitionMixin(@var, @attr: color, @transition: color) {
    @{attr}    : @var;
    transition+: @transition var(--transitionTime, 0.3s ease);
}

// 颜色过渡混入
.hColorMixin(@attr: color, @transition: color) {
    .attrTransitionMixin(var(--color-font, #000), @attr, @transition);
}

.metaColorMixin(@attr: color, @transition: color) {
    .attrTransitionMixin(var(--color-meta, #5c5c5c), @attr, @transition);
}

.bodyBgColorMixin(@attr: color, @transition: color) {
    .attrTransitionMixin(var(--color-body-bg, #f2f3f0), @attr, @transition);
}

.commentColorMixin(@attr: color, @transition: color) {
    .attrTransitionMixin(var(--color-comment , #525f7f), @attr, @transition);
}

// 链接 下划线
.linkDecorationMixin() {
    background     : linear-gradient(rgba(var(--color-link-decoration-rgb),.4), rgba(var(--color-link-decoration-rgb),.4)) bottom no-repeat;
    background-size: 100% .4em;
    transition     : background-size var(--transitionTime, 0.3s ease), color var(--transitionTime, 0.3s ease);

    &:hover {
        background-size: 100% 50%;
    }
}

//
.linkDecorationAnimationMixin() {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        transition: all var(--transitionTime, 0.3s ease) 0s;
        z-index: -1;
        left: 50%;
        bottom: 0px;
        width: 0px;
        height: 8px;
        background-color: rgba(var(--color-link-decoration-rgb),.4);
    }

    &:hover::before {
        width: 100%;
        left: 0
    }

    &.active {
        background-color: rgba(var(--color-link-decoration-rgb),.4);
    }
}

// 文章中链接
.postLinkMixin() {
    font-size            : .9rem;
    padding              : 0 5px;
    text-decoration      : underline;
    color                : var(--color-link, #6062ce);
    text-decoration-color: var(--color-link, #6062ce);
    transition           : color var(--transitionTime, 0.3s ease),
        background-color var(--transitionTime, 0.3s ease);

    &:hover {
        color           : var(--color-link-contrast, #fff);
        background-color: var(--color-link, #6062ce);
        text-decoration : none;
    }
}

// 文本选中
.selectText() {
    color     : var(--color-link-contrast, #fff);
    background: var(--color-link, #6062ce);
}